<div class="cart-container">
  <h3>我的购物车</h3>
  <div *ngIf="cart$ | async as product;">
    <div class="product-item" *ngFor="let item of product;index as index">
      <div class="img">
        <img [src]="item.imageUrl" alt="">
      </div>
      <div class="title">
        <span>{{item.title}}</span>
      </div>
      <div class="price">
        <div class="unit-price">
          <span>￥{{item.price | calculatePrice}}</span>
        </div>
        <div class="amount">
          <div>x {{item.count}}</div>
        </div>
      </div>
      <div class="select" (click)="handleSelect(product[index])"
        [ngStyle]="{'background-color': product[index].selected?'red': '#fff'}"></div>
      <div class="pay">实付款：￥<span>{{item.price | calculatePrice: item.count}}</span></div>
      <div class="cancel-button">
        <button (click)="handleDeleteProductClick(index)">取消订单</button>
      </div>
      <div class="pay-button">
        <button>去支付</button>
      </div>
    </div>
  </div>
  <div class="pay-all">
    <div class="select-product">
      <span class="select-all" (click)="handleSelectAll()"
        [ngStyle]="{'background-color': allSelectedIsTrue? 'red': '#fff'}"></span>
      <span style="padding: .5rem;">全选</span>
    </div>
    <div class="count-price">
      合计：<span>￥{{cart$ | async | totalProductsMoney | calculatePrice}}</span>
    </div>
    <div class="buy">购买全部</div>
  </div>
</div>
